<template>
    <div class="dict">
        <div class="left">
            <el-form :inline="true" :model="bigForm">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="">
                            <el-input v-model="bigForm.dictionary_code" placeholder="编码"></el-input>
                        </el-form-item>
                        <el-form-item label="">
                            <el-input v-model="bigForm.dictionary_name" placeholder="名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="">
                            <el-select v-model="bigForm.mark_enabled" placeholder="启用状态">
                                <el-option label="启用" value="1"></el-option>
                                <el-option label="禁用" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit('1')">查询</el-button>
                            <el-button type="default" @click="onReset('1')">重置</el-button>
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-button type="primary" icon="el-icon-plus" circle @click="oprate('1')"></el-button>
                        <el-button type="primary" icon="el-icon-edit" circle @click="oprate('2')"></el-button>
                        <el-button type="danger" icon="el-icon-delete" circle @click="oprate('3')"></el-button>
                        <el-button type="success" icon="el-icon-check" circle @click="oprate('4')"></el-button>
                    </el-col>
                </el-row>
            </el-form>
            <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick" :default-expand-all="true"
                node-key="id" ref="elTree" style="margin-top:20px;"></el-tree>
        </div>
        <div class="right" v-if="tableData.length > 0">
            <el-form :inline="true" :model="littleForm">
                <el-form-item label="编码">
                    <el-input v-model="littleForm.dictionary_code" placeholder="编码"></el-input>
                </el-form-item>
                <el-form-item label="名称">
                    <el-input v-model="littleForm.dictionary_name" placeholder="名称"></el-input>
                </el-form-item>
                <el-form-item label="启用状态">
                    <el-select v-model="littleForm.mark_enabled" placeholder="启用状态">
                        <el-option label="启用" value="1"></el-option>
                        <el-option label="禁用" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit('2')">查询</el-button>
                    <el-button type="default" @click="onReset('2')">重置</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="tableData" stripe fit border style="width:100%;max-height: calc(100vh - 180px);">
                <el-table-column label="序号" width="40" type="index" :index="indexMethod">
                </el-table-column>
                <el-table-column prop="dictionary_name" label="名称" width="140">
                </el-table-column>
                <el-table-column prop="dictionary_code" label="编码" width="140">
                </el-table-column>
                <el-table-column prop="grade" label="层级" width="60">
                </el-table-column>
                <el-table-column prop="dictionary_piid" label="父级ID" width="60">
                </el-table-column>
                <el-table-column prop="is_preset" label="是否预置" width="60">
                </el-table-column>
                <el-table-column prop="mark_enabled" label="启用标记" width="60">
                </el-table-column>
                <el-table-column prop="mark_deleted" label="删除标记" width="60">
                </el-table-column>
                <el-table-column prop="remarks" label="备注" width="180">
                </el-table-column>
                <el-table-column prop="sort_code" label="排序" width="60">
                </el-table-column>
                <el-table-column prop="dic_type" label="字典类型" width="60">
                </el-table-column>
                <el-table-column prop="create_time" label="创建时间" width="150">
                </el-table-column>
                <el-table-column prop="create_username" label="创建人" width="100">
                </el-table-column>
                <el-table-column prop="modify_time" label="修改时间" width="150">
                </el-table-column>
                <el-table-column prop="modify_username" label="修改人" width="100">
                </el-table-column>
            </el-table>
            <div class="table-pagination">
                <el-pagination background layout="prev, pager, next" :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex';

const dd = createNamespacedHelpers(
    "ddmg/dataDict"
);
export default {
    data() {
        return {
            bigForm: {
                dictionary_code: "",
                dictionary_name: "",
                mark_enabled: "",
            },
            littleForm: {
                _rows: 20,
                _pages: 1,
                dictionary_piid: "",
                dictionary_code: "",
                dictionary_name: "",
                mark_enabled: "",
                sort: "",
                order: "",
            },
            defaultProps: {
                children: 'children',
                label: 'text'
            },
            selectObj: "",
            total:0
        }
    },
    computed: {
        ...dd.mapState(['treeData', 'tableData'])
    },
    mounted() {
        this.initData(this.bigForm)
    },
    methods: {
        ...dd.mapActions(['initData', 'getTableData']),
        indexMethod(index) {
            return (this.littleForm._pages - 1) * this.littleForm._rows + index + 1;
        },
        handleNodeClick(e) {
            console.log(e)
            this.selectObj = e
            // 获取子项并展示子项列表数据
            this.littleForm.dictionary_piid = e.iid
            this.getTableData(this.littleForm).then(res => {
                this.total = res.records
            })
        },
        oprate(type) {
            if (type != '1' && !this.selectObj) {
                this.$message.warning("请选择大类")
                return
            }
            if (type == '1') {
                //新增
            } else if (type == '2') {
                // 修改
            } else if (type == '3') {
                // 删除
            } else if (type == '4') {
                // 启用禁用
            }
        },
        onSubmit(type) {
            if (type == '1') {
                this.initData(this.bigForm)
            } else {

            }
        },
        onReset(type) {
            if (type == '1') {
                this.bigForm = {
                    dictionary_code: "",
                    dictionary_name: "",
                    mark_enabled: ""
                }
                this.initData(this.bigForm)
            } else {

            }
        },
    }
}

</script>

<style lang="scss" scoped>
.dict {
    display: flex;
    flex-direction: row;
    padding: 20px;

    .left {
        width: 400px;
    }

    .right {
        width: calc(100% - 400px);
        .table-pagination{
            padding: 20px;
            text-align: right;
        }
    }
}
</style>